import { IWidgetDesc } from '@/config';
import { defineComponent, PropType } from '@vue/composition-api';

export default defineComponent({
  props: {
    widgets: {
      type: Array as PropType<IWidgetDesc[]>,
      required: true,
    },
    widgetDragstart: {
      type: Function as PropType<(widgetDesc: IWidgetDesc) => void>,
      required: true,
    },
  },

  setup(props) {
    function handleDragstart(e: DragEvent, widgetDesc: IWidgetDesc) {
      console.log(props);

      if (props.widgetDragstart) {
        props.widgetDragstart(widgetDesc);
      }
    }

    function handleDragend(e: DragEvent) {
      console.log(e, 'end');
    }

    return () => (
      <div class="df-widgets">
        {props.widgets.map(item => (
          <div
            class="df-widgets__item"
            draggable
            onDragstart={(e: DragEvent) => handleDragstart(e, item)}
            onDragend={handleDragend}
          >
            <span class="df-widgets__label">{item.label}</span>
            {item.preview()}
          </div>
        ))}
      </div>
    );
  },
});
